<template>
    <div class="catagoryPage">
      <!-- header -->
      <div class="catagory_header">
        <van-nav-bar
          title="全部分类"
        />
      </div>
      <!-- search of catagory  -->
      <div class="catagory_search">
        <van-search
          placeholder="搜索商品"
          input-align="center"
          @click="$router.push('/search')"
        />
      </div>
      <!-- caragory body -->
      <div class="cara_body">
        <div class="body_left">
          <van-sidebar v-model="activeKey">
            <van-sidebar-item
              v-for="item in catagoryList"
              :key="item.sort"
              :title="item.name"
            />
          </van-sidebar>
        </div>
        <div class="body_right">
          <catagoryDetail :value="cataDetail"></catagoryDetail>
        </div>
      </div>
    </div>
</template>

<script>
import { getCaragory } from '@/api/catagory'
import catagoryDetail from '@/components/catagoryDetail.vue'

export default {
  name: 'CatagoryIndex',
  components: {
    catagoryDetail
  },
  data () {
    return {
      activeKey: 0,
      catagoryList: [],
      cataDetail: []
    }
  },
  async created () {
    const { data: { list } } = await getCaragory()
    // console.log('all', list)
    this.catagoryList = list
  },
  updated () {
    const index = this.activeKey
    const { children } = this.catagoryList[index]
    this.cataDetail = children
    // console.log(this.cataDetail)
  }
}
</script>

<style scoped>
  ::v-deep .van-nav-bar__title{
    font-weight: 600;
  }
  .van-search .van-cell{
    font-size: 20px;
    height: 30px;
    line-height: 30px;
  }
  .cara_body{
    display: flex;
  }
  .body_left{
    height: 525px;
    width: 100px;
    overflow:auto;
  }
  .van-sidebar-item{
    width: 100px;
  }
  ::v-deep .van-sidebar-item__text{
    font-size: 15px;
  }
</style>
